{% extends 'base.html' %}

{% block content %}

<script type='text/javascript'>
var o = { type:'/music/album', 
          type:'/film/film',
          type:'/tv/tv_program' };

function selected(e, data) {
  $('#fbid').val(data.id);
  $('#fbname').val(data.name);
  $('#product_name').html(data.name);
  //$('#product_type').html('('+data.name+')');
  get_params();
}

$(function() {
  $("#fb_product_autosuggest_input").suggest().bind('fb-select', selected);
});

var global;

function get_params() {
  var fbid = $('#fbid').val();
  console.log('get_params' + fbid);  query = [{"id": fbid, "/common/topic/image": [{}], "type":[]}];
  query_envelope = {'query' : query};
  service_url = 'http://api.freebase.com/api/service/mqlread';
  url = service_url  + '?callback=?&query=' + encodeURIComponent(JSON.stringify(query_envelope));
  $.getJSON(url, function(response) {
	types = response.result[0]['type'];
	for (i in types) {
	  $('#type_select').append('<option>'+types[i]+'</option>');
	}
	var imgslug = response.result[0]['/common/topic/image'][0]['id'];
	var imgurl = 'http://img.freebase.com/api/trans/image_thumb'+imgslug+'?maxheight=150&mode=fit&maxwidth=150';
	$('#product_image_img').attr('src',imgurl);
	$('#imgslug').val(imgslug);

  });
  $.getJSON('/notable_for?id='+fbid, function(response) {
	global = response;
	$('#product_type').html('('+response['name']+')');
	$('#fbtype_id').val(response['id']);
	$('#fbtype_name').val(response['name']);
  });
}
</script>

<h3>New Record</h3>

{% if user.is_authenticated %}
<div style='text-align: center;'>
  <p style='text-align: center;'>
  Search and select:<br/>
  <input id='fb_product_autosuggest_input' type='input'> <br/>
  <!-- <a style='font-size: 9pt;' class='discrete_link' href='javascript:toggle_create_mod()'>[Add a Thing not in the list]</a> -->
  </p>
  <p>
  <span style='font-size: 14pt;' id='product_name'> &nbsp;</span> <span style='font-size: 14pt; ' id='product_type'></span>
  </p>
  <div id='new_product_img_div' id='product_image'>
  <img id='product_image_img' src=''/>
  </div>
  <p>
  <form action='/add_product_fb' method='post'>
  <input type='submit' value='Add it!'/>
  <input type='hidden' id='fbid' name='fbid'/><br/>
  <input type='hidden' id='fbname' name='fbname'/><br/>
  <input type='hidden' id='fbtype_id' name='fbtype_id'/><br/>
  <input type='hidden' id='fbtype_name' name='fbtype_name'/><br/>
  <input type='hidden' id='imgslug' name='imgslug'/><br/>
  </form>
  </p>
</div>
<br/>
<br/>
<br/>




<!--<form action='/newproduct' method='post'>
{% csrf_token %}

<table>
<tr><th>Picture</th><td> <a href='javascript:get_params()'> get_params() </a> </td></tr>

<tr><th><label for="id_name">Name:</label></th><td><input id="id_name" type="text" name="name" maxlength="32" /></td></tr>

<tr>
  <th><label for="id_category">Category:</label>
  </th>
  <td>
	<select name="category" id="id_category">
	  <option value="" selected="selected">---------</option>
	  <option value="1">Cell Phone</option>
	  <option value="2">Hotel</option>
	  <option value="3">Restaurant</option>
	</select>
  </td>
</tr>	
<tr><th><label for="id_description">Description:</label></th><td><textarea id="id_description" rows="10" cols="40" name="description"></textarea></td></tr>
</table>


<input type='submit' name='submit' value='submit'/>
</form>-->
{% else %}
You need to <a href="/accounts/login/">login</a> to create a new record.
{% endif %}
{% endblock %}

